<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      后盾人视频教程后盾人sdfsdfds
      <a href="https://baidu.com">百度</a>
      <a href="https://yahoo.com">雅虎</a>
    </main>

    <nav>Welcometojavascript2024!</nav>
    <script>
      const mian = document.querySelector("main");
      let reg = /(?=.*?视频教程)后盾人/gd; //正向断言    可以使用量词 与之匹配的?!也可以 // // 正向 断言 根据?=匹配前面的内容
      let regx = /(?<=视频教程)后盾人/gd; //反向断言   不能适量；量词 如 (?<=.*视频教程)     // // 根据?<>匹配后面的

      console.dir(mian.innerHTML.match(reg));//第一个
      console.dir(mian.innerHTML.match(regx));//第二个
      mian.innerHTML = mian.innerHTML.replace(
        reg,
        `<a href="www.baidu.com">$&</a>`
      );

      //   案例
      const rreg = /(?<=href=(['"])).+(?=\1)/gi;
      console.log(mian.innerHTML.match(rreg));
      mian.innerHTML = mian.innerHTML.replace(rreg, `https.houdunren.com`);

      //正向否定断言
      const nav = document.querySelector("nav");
      let hd = `houdunren2010hdcm`;

      console.dir(hd.match(/[a-z]+(?!\d+)/)); //匹配的是一个houdunre因为n后面就是数字
      console.dir(hd.match(/[a-z]+(?!\d+)$/)); //匹配的是hdcm

      let nreg = /([a-zA-Z]+)(?!\d+)/g;
      let nnreg = /(?!\d+)([a-zA-Z]+)/g;

      console.log(
        "Welcometojavascript2024 Welcometojavascripts".match(nreg),
        "正向否定匹配"
      );
      console.log(
        "Welcometojavascript2024 Welcometojavascripts".match(nnreg),
        "正向否定匹配"
      );

      let nregx = /(?<![a-z]+!)([\s]+\w+)+/g;
      console.log(nav.innerHTML.match(nregx), "反向否定匹配");
      nav.innerHTML = nav.innerHTML.replace(
        nreg,
        `<span style="color:red">$&</span>`
      );
    </script>
  </body>
</html>
